Highcharts এর সাথে Angular ইন্টিগ্রেট করার পর, আপনি সহজেই বেসিক চার্ট তৈরি করতে পারেন। এখানে আমরা একটি বেসিক Highcharts চার্ট তৈরি করতে Angular কম্পোনেন্ট তৈরি করার প্রক্রিয়া দেখব।

ধাপ ১: Highcharts এবং Highcharts Angular র‍্যাপার ইনস্টল করা

প্রথমে, আপনাকে Highcharts এবং Highcharts Angular র‍্যাপার ইনস্টল করতে হবে। Angular প্রজেক্টের মধ্যে এই প্যাকেজগুলো ইনস্টল করতে নিচের কমান্ডগুলি ব্যবহার করুন:

npm install highcharts --save
npm install highcharts-angular --save

এটি Highcharts লাইব্রেরি এবং Highcharts Angular র‍্যাপার ইনস্টল করবে, যা Angular কম্পোনেন্টে Highcharts ব্যবহার করতে সাহায্য করবে।

ধাপ ২: কম্পোনেন্ট তৈরি করা

Highcharts চার্ট তৈরি করতে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে। কম্পোনেন্ট তৈরি করতে Angular CLI কমান্ড ব্যবহার করুন:

ng generate component chart

এটি chart নামে একটি নতুন কম্পোনেন্ট তৈরি করবে এবং প্রয়োজনীয় ফাইলগুলো তৈরি করবে।

ধাপ ৩: প্রয়োজনীয় মডিউল ইমপোর্ট করা

এখন, highcharts-angular মডিউলটিকে app.module.ts ফাইলে ইমপোর্ট করতে হবে, যাতে আমরা আমাদের অ্যাপ্লিকেশনে Highcharts ব্যবহার করতে পারি।

import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent,
    ChartComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule  // এখানে HighchartsChartModule ইমপোর্ট করা হচ্ছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ধাপ ৪: কম্পোনেন্টে Highcharts চার্ট কনফিগার করা

এখন chart.component.ts ফাইলে Highcharts চার্ট কনফিগার করতে হবে। এটি সম্পূর্ণ চার্টের কনফিগারেশন প্রদান করবে যেমন: চার্টের ধরন, ডেটা, এক্সিস, এবং অন্যান্য অপশন।

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;  // Highcharts ইনিশিয়ালাইজ করা
  chartOptions = {          // চার্ট কনফিগারেশন
    chart: {
      type: 'line'         // এখানে 'line' চার্ট টাইপ ব্যবহার করা হচ্ছে
    },
    title: {
      text: 'BASIC Highcharts Example'  // চার্টের শিরোনাম
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']  // এক্স-অ্যাক্সিসের ডেটা
    },
    yAxis: {
      title: {
        text: 'Values'  // ওয়াই-অ্যাক্সিসের শিরোনাম
      }
    },
    series: [{
      name: 'Data Series',
      data: [1, 3, 2, 4, 5, 6, 7]  // ডেটা সিরিজ
    }]
  };
}

ধাপ ৫: কম্পোনেন্টের টেমপ্লেট তৈরি করা

এখন chart.component.html ফাইলে Highcharts কম্পোনেন্ট ট্যাগ ব্যবহার করতে হবে যাতে চার্ট রেন্ডার হয়।

<div style="width: 100%; height: 400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

এই টেমপ্লেটটি Highcharts কম্পোনেন্টকে রেন্ডার করবে এবং আগের ধাপে দেয়া কনফিগারেশন অনুযায়ী চার্ট প্রদর্শন করবে।

ধাপ ৬: অ্যাপ্লিকেশন রান করা

এখন, Angular অ্যাপ্লিকেশন চালু করার জন্য নিচের কমান্ডটি রান করুন:

ng serve

এরপর ব্রাউজারে গিয়ে http://localhost:4200 তে গিয়ে আপনি আপনার বেসিক Highcharts চার্টটি দেখতে পাবেন।

সারাংশ

এই প্রক্রিয়ায়, Angular CLI ব্যবহার করে একটি নতুন কম্পোনেন্ট তৈরি করা হয়েছে এবং Highcharts এর সাহায্যে বেসিক লাইন চার্ট কনফিগার করা হয়েছে। Highcharts Angular র‍্যাপার ব্যবহার করার মাধ্যমে Angular প্রজেক্টে চার্ট যুক্ত করা সহজ এবং কার্যকর হয়েছে। এখন আপনি এই চার্টে ডেটা, এক্সিস এবং অন্যান্য কনফিগারেশন সহজে পরিবর্তন করতে পারবেন।